<template>
  <div class="container">
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
      <el-form-item label="标签组类别">
        <el-select style="width: 280px" v-model="ruleForm.tag_list" placeholder="全部" multiple @click="selecTag" @change="changeTag">
          <el-option v-for="item in AllTags" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签搜索" style="margin-left: -500px">
        <el-input v-model="ruleForm.keyword" class="w-50 m-2" placeholder="输入标内容进行查找" :suffix-icon="Search" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
        <el-button @click="resetForm(ruleFormRef)">清空</el-button>
      </el-form-item>
    </el-form>
    <div class="newTag">
      <div class="time">最近企微客户同步时间：2022/12/24 12:24:24</div>
      <div class="btn">
        <el-button style="margin-right: 17px" type="primary" @click="openCreateTag">新建标签组</el-button>
        <el-dropdown>
          <el-button>
            更多操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="synchronization">同步至企微</el-dropdown-item>
              <el-dropdown-item @click="merge">合并至企微标签</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <ZWCreateTag ref="createTag" @submit="tagList" />
    <ZWSelectTag ref="searchSelectRef" @submit="getTags" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { ElForm } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import ZWCreateTag from '../../../components/ZWCreateTag.vue'
import { getSetionId } from '@/utils/utils'
import bus from '@/utils/bus'

// import ZWSelectTag from '../../components/ZWSelectTag.vue'
import ZWSelectTag from '../../../components/ZWSelectTag.vue'
import { syncWE } from '@/api/customerCenter'

type FormInstance = InstanceType<typeof ElForm>
const ruleFormRef = ref<FormInstance>()
// 选择标签options
const AllTags = ref([])
const createTag = ref(null)
const searchSelectRef = ref(null)
const ruleForm = reactive({
  keyword: '',
  tag_list: ''
})

const emit = defineEmits(['search'])

// 打开选择标签
const selecTag = () => {
  searchSelectRef.value.showCreatTag = true
  searchSelectRef.value.appDialog.visible = true
  searchSelectRef.value.selectTags = AllTags.value
}
// 获取标签
const getTags = (data: any) => {
  AllTags.value = data
  ruleForm.tag_list = getSetionId('id', data)
}
const changeTag = (data: any) => {
  let arr: any[] = AllTags.value.filter((item: any) => data.includes(item.id))
  ruleForm.tag_list = getSetionId('id', arr)
  AllTags.value = arr
}
const openCreateTag = () => {
  createTag.value.appDialog.visible = true
  createTag.value.appDialog.title = '新建标签组'
}
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      emit('search', ruleForm)
    } else {
      return false
    }
  })
}
// 清空表单
const resetForm = (formEl: FormInstance | undefined) => {
  ruleForm.keyword = ''
  ruleForm.tag_list = ''
  bus.emit('getCusTagList')
}
// 同步至企微
const synchronization = () => {
  syncWE()
}
</script>
<style scoped lang="scss">
.container {
  :deep .demo-ruleForm {
    padding: 0 18px 0;
    height: 56px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  :deep .el-form-item {
    margin-bottom: 0;
    deep .seltag {
      width: 280px;
    }
  }
  .newTag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 49px;
    border: 1px solid #f9f9f9;
    padding: 0 18px;
    .time {
      font-size: 14px;
      font-weight: 300;
      color: #33302d;
    }
  }
}
</style>
